<template>
    <div class="play-page">
        <div class="play-top" style="z-index: 1 ;position: relative">
            <div>
                <img style="width: 100%;margin-top:-40px;" src="../assets/img/game-bg-normal.svg" alt="">
            </div>
            <div class="play-box">
                <p style="position: absolute;left:calc(50% - 10px);top: 0px;">玩赚</p>
                <div class="topRule" @click="jumpRule">规则说明</div>
                <div>
                    <img style="width: 86%;left: 7%;position: absolute;top: 65px;" src="../assets/img/game-bg-data.svg" alt="">
                    <div style="position: absolute;top:70px;width: 100%;color:#DC490E;">
                        <van-swipe @change="" style="height: 21px;width:100%; overflow: hidden; " :stop-propagation="false"
                            :show-indicators="false" vertical :touchable="false" :autoplay="3000">
                            <van-swipe-item style=" display: inline-block; width: 100% ;height: 21px"
                                v-for="(val,index) in tbUserCashList" :key="val.id">
                                <span>{{starPhone(val.phone)}}: 提现￥{{val.cashBalance}}</span>
                            </van-swipe-item>
                            <van-swipe-item style=" display: inline-block; width: 100% ;height: 21px"
                                v-for="(val,index) in tbUserLuckdrawList" :key="val.id">
                                <span>{{starPhone(val.phone)}}于{{val.endTime.split(' ')[0]}}中奖￥{{val.balance}}</span>
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                    <div style="position: absolute;left:7%;top:113px;width: 86%;color:#FF8523;display: flex;justify-content: space-between;">
                        <div>
                            <div style="color: #E9A78D;">剩余奖励</div>
                            <div style="padding: 0 20px;font-size: 20px;margin-top: 6px;font-weight: bold;border-right: 1px solid #E9A78D;">
                                <span v-if="gameBankState!=0">{{surplus_sqt}}</span>
                                <span v-if="gameBankState==0">0</span>
                                <span style="font-size: 16px;">SQT</span>
                            </div>
                        </div>
                        <div>
                            <div style="color: #E9A78D;">今日奖励</div>
                            <div style="padding: 0 20px;font-size: 20px;margin-top: 6px;border-right: 1px solid #E9A78D;font-weight: bold;">{{today_award}}<span style="font-size: 16px;">SQT</span></div>
                        </div>
                        <div>
                            <div style="color: #E9A78D;">累计奖励</div>
                            <div style="padding: 0 20px;font-size: 20px;margin-top: 6px;font-weight: bold;">{{total_award}}<span style="font-size: 16px;">SQT</span></div>
                        </div>
                    </div>
                </div>
                <div>
                    <img  v-if="gameBankState!=0" style="width: 200px;position: absolute;top: 223px;left: calc(50% - 100px);" src="../assets/img/game-img-building.svg" alt="">
                    <div class="disGai" :style="disShow?'pointer-events: none;':''"  v-if="gameBankState==0">
                        <img src="../assets/img/game-icon-btn.svg" alt="">
                        <div v-if="isFirstBuilding == 1" style="position: relative;top:-54px;color: #B04920;font-size: 18px;font-weight: bold;" @click="stackopolisCli()">盖楼</div>
                        <div v-if="isFirstBuilding == 0" style="position: relative;top:-47px;color: #B04920;font-size: 18px;font-weight: bold;" @click="stackopolisCli()">免费体验</div>
                        <div v-if="isFirstBuilding == 1" style="position: relative;top:-53px;color: rgba(176, 73, 32, .8);font-size: 11px;">盖楼解锁每日任务</div>
                    </div>
                </div>
            </div>
            <div style="padding:0px 10px;display: flex;justify-content: space-between;">
                <div style="border-radius: 8px 8px 0 0; color:#C55900;background-image: linear-gradient(to bottom,rgba(255, 243, 190, 1),rgba(254, 224, 128, 1));width: 50%;margin-right:13px;height: 85px;margin-top:20px;padding: 0px 13px;position: relative;">
                    <div style="font-size: 24px;margin-top:13px;">{{tbUserSqt}}</div>
                    <div style="font-size: 12px;position: absolute;bottom:19px;left:13px;">我的SQT</div>
                    <div @click="jumpChong" style="position: absolute;bottom:13px;right:0px;line-height:24px;background-color: #D47501;border-radius: 15pt  0pt  0pt  15pt;width:77px;height: 24px;color:#fff;">
                        <span style="font-size: 12px;margin-left:13px;">去充值</span>
                        <img style="vertical-align: middle;width: 16px;margin-left: 4px;margin-top: -1px;" src="../assets/img/invest-icon-more.svg" alt="">
                    </div>
                </div>
                <div style="border-radius: 8px 8px 0 0; color:#D14610;background-image: linear-gradient(to bottom,#FFEDE1,#FFC4B1);width: 50%;height: 85px;margin-top:20px;padding: 0px 13px;position: relative;">
                    <div style="font-size: 24px;margin-top:13px;">{{tb_user_contribution}}</div>
                    <div style="font-size: 12px;position: absolute;bottom:19px;left:13px;">我的贡献值</div>
                    <div @click="jumpCha" style="position: absolute;bottom:13px;right:0px;line-height:24px;background-color: #D14610;border-radius: 15pt  0pt  0pt  15pt;width:77px;height: 24px;color:#fff;">
                        <span style="font-size: 12px;margin-left:13px;">查看</span>
                        <img style="vertical-align: middle;width: 16px;margin-left: 4px;margin-top: -1px;" src="../assets/img/invest-icon-more.svg" alt="">
                    </div>
                </div>
            </div>
            <div class="myTask">
                <span>每日任务</span>
                <p style="position: relative;" @click="jumpInte">
                    <span style="color: #FF2E67;" v-if="userType == 1">开启26倍奖励</span>
                    <img style='vertical-align: middle;width: 23px;margin-top: -1px;' src="../assets/img/common-icon-moreGray.svg" alt="">
                    <!-- <i @click="jumpInte" class="icc iconfont icon-iconfontyoujiantou"></i> -->
                </p>
            </div>
            <div v-if="gameBankState==0" style="padding-left: 14px;color: #FF2E67;margin-top:5px;">盖楼后以下任务自动开启</div>
            <div class="Task-list" v-for="val in taskList" :key="val.id">
                <img :src="val.icon" alt="">
                <div class="Tasl-list-content">
                    <p style="margin-top: 6px;">
                        {{val.taskName}} 
                        <span v-if="val.taskName=='邀请好友' || val.taskName=='分享商品' || val.taskName=='分享应用'" style="margin-left: 3px;">({{val.actualFrequency+'/'+val.frequency}})</span>
                        <span v-if="val.taskName=='玩游戏'" style="margin-left: 3px;"> (3分钟)</span>
                        <span v-if="val.taskName=='看资讯'" style="margin-left: 3px;"> (1分钟)</span>
                        <span v-if="val.contributionValue" style="color: #FF2E67;margin-left: 3px;"> +{{val.contributionValue}}贡献值 </span>
                    </p>
                    <!-- <h6 v-if="val.taskName!='玩游戏' && val.taskName!='看资讯'">{{val.frequency == 1?val.remark:val.actualFrequency+'/'+val.frequency}}</h6> -->
                </div>
                <div v-show="val.completeState == 0 && gameBankState==0" style="opacity: .5;pointer-events: none;" class="tasl-list-right" @click="sightTask(val)">
                    前往
                </div>
                <div v-show="val.completeState == 0 && gameBankState!=0" class="tasl-list-right" @click="sightTask(val)">
                    前往
                </div>
                <div v-show="val.completeState != 0" class="tasl-list-right" style="background: #cccccc;">
                    已完成
                </div>
            </div>
            <div style="width:100%;height:6px;background:rgba(237,237,237,1);"></div>
            <div class="myTask">
                <span>我的抽奖</span>
            </div>
            <div class="Task-list" v-for="val in raffleList" :key="val.id">
                <img src="../assets/img/play-icon-prize@2x.png" alt="">
                <div class="Tasl-list-content" v-if="raffleList.length>0">
                    <p>
                        {{val.name}}
                        <span
                            v-if="val.rewardContent && val.rewardContent.indexOf('现金')==-1">{{val.rewardContent}}</span>
                        <span v-else>{{val.balance}}元</span>

                    </p>
                    <h6>{{val.joinIntegral}}SQT，每日开奖</h6>
                </div>
                <div v-if="val.state == 1" class="tasl-list-right" @click="luckdraw(val.luckdrawType)">
                    <span>抽奖</span>
                </div>
                <div v-if="val.state == 0" class="tasl-list-right" @click="luckuser(val.id)">
                    <span>开奖</span>
                </div>
                <div v-if="val.state == 2" class="tasl-list-right" style="background: #d7d7d7;">
                    <span>未开启</span>
                </div>
            </div>
        </div>
        <home-index></home-index>
        <van-overlay :show="isblock" @click="overCli">
            <div class="wrapper" @click.stop>
                <div class="block-block">
                    <p>盖楼</p>
                    <div class="block-grade">
                        <div class="block-block-grade-img">
                            <img src="../assets/img/floor1.png" alt="">
                            <img src="../assets/img/bank1.png" alt="">
                        </div>
                        <div class="block-block-grade-right">
                            <p>
                                银行 {{profitNumber}} SQT
                            </p>
                            </h3>
                        </div>
                        <van-checkbox v-if="isRewardSqt == 1" v-model="checked"
                            style="position: absolute;top:20px;right: 10px" checked-color="#FFD13F"></van-checkbox>
                    </div>
                    <div class="grade-btn-box" style="margin-top: 20px;" v-if="isRewardSqt == 1">
                        <div class="grade-btn-left" @click="gradecloseblock" style="margin-left: 65px">
                            取消
                        </div>
                        <div @click="stackopolisCli" class="block-grade-btn-right">
                            盖楼
                        </div>
                    </div>
                    <div v-else>
                        <button @click="stackopolisCli"
                            style="margin-top:28px;border:none;padding:10px 40px;font-size: 14px;color:#fff;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 22px;">确认盖楼</button>
                    </div>
                </div>

            </div>
        </van-overlay>
        <div id="overCl">
            <van-overlay :show="issigth" @click="issigth = false">
                <div class="wrapper" @click.stop>
                    <div class="block-block-sight">
                        <p>签到</p>
                        <b>+{{tbUserIntegralConfigDetailArr&&tbUserIntegralConfigDetailArr.rewardValue}} 积分</b>
                        <div>
                            <div class="sight-top"></div>
                            <div class="box-bottom">
                                <ul class="box-list">
                                    <li>
                                        <p>第一天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('1')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[0].value}}</h5>
                                    </li>
                                    <li>
                                        <p>第二天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('2')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[1].value}}</h5>
                                    </li>
                                    <li>
                                        <p>第三天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('3')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[2].value}}</h5>
                                    </li>
                                    <li>
                                        <p>第四天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('4')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[3].value}}</h5>
                                    </li>
                                    <li>
                                        <p>第五天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('5')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[4].value}}</h5>
                                    </li>
                                    <li>
                                        <p>第六天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('6')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[5].value}}</h5>
                                    </li>
                                    <li>
                                        <p>第七天</p>
                                        <img src="../assets/img/point@2x.png" alt="">
                                        <div v-if="tbUserIntegralConfigDetailList.indexOf('0')>-1"
                                            class="sight-content">
                                            已签到
                                        </div>
                                        <h5 v-else>+{{integralconfig[6].value}}</h5>
                                    </li>
                                </ul>
                            </div>
                        </div>


                        <div class="sight-btn" @click="issigthclose()">
                            关闭
                        </div>
                    </div>

                </div>
            </van-overlay>
        </div>
    </div>
</template>

<script>
    import homeIndex from "../components/homeIndex.vue"
    import { Toast } from 'vant'
    export default {
        name: "gameindex",
        components: {
            homeIndex
        },
        data() {
            return {
                Loop: null,
                changdu: 0,
                changduOld: 0,
                show: false,
                isblock: false,
                issigth: false,
                personamomey: false,
                personbranch: false,
                Tips: false,
                checked: true,
                checkedd: false,
                checkeddd: false,
                // 禁止连续点击
                disableCilck:false,
                userId: '',
                tbUserSqt: 0,
                taskList: [],
                gameBankState: 0,
                productCoinRate: 0,
                grade: '',
                sqt_totalNumber: 0,
                businessHours: 0,
                proportion: 0,
                profitNumber: 0,
                integralconfig: [
                    { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }, { value: 6 }, { value: 7 }
                ],
                tbUserIntegralConfigDetailList: "",
                tbUserIntegralConfigDetailArr: {},
                raffleList: [],
                setInterVal: null,
                isRewardSqt: 0,
                isFirstBuilding: 0,
                isGive100: 0,
                tbUserLuckdrawList: [],
                tbUserCashList: [],
                tb_user_contribution:0,
                integralAgent:0,
                total_award:0,
                today_award:0,
                surplus_sqt:0,
                userType:0,
                disShow:false
            }
        },
        mounted() {
            this.$store.dispatch('updataActive', 2)
            this.userId = localStorage.getItem('user_id');
            this.getLoginUserAllTasks();
            this.getGameBuildingData();
            this.raffle();
            this.firstCome();
            this.noticeMoney();
            this.findSQTTitleData();
            this.showPopup();
        },
        destroyed() {
            if (this.setInterVal) { //如果定时器在运行则关闭
                clearInterval(this.setInterVal);
            }
        },
        methods: {
            //隐藏盖楼弹框
            overCli(){
                this.isblock = false;
            },
            //查询SQT标题数据
            findSQTTitleData(){
                this.$http.get(this.utils.config + "/netmall/app/person/api/findSQTTitleData?user_id="+this.userId).then((data) => {
                    if (data.data.success) {
                        this.surplus_sqt = data.data.result.surplus_sqt;
                        this.today_award = data.data.result.today_award;
                        this.total_award = data.data.result.total_award;
                    }
                })
            },
            //代理升级规则
            dailiCli(){
                this.$router.push('/agentgrade');
            },
            //跳转积分充值页面
            jumpChong(){
                this.$router.push('/integralTopUp')
            },
            //跳转贡献值明细页面
            jumpCha(){
                this.$router.push('/contributionDetails')
            },
            //手机号后四位变星号
            starPhone(phoneNum) {
                let str = String(phoneNum),
                    strLen = str.slice(-7, -3);
                return str.replace(strLen, "****");
            },
            //轮播收益消息
            noticeMoney() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getGameCenterNotice").then((data) => {
                    if (data.data.success) {
                        this.tbUserLuckdrawList = data.data.result.tbUserLuckdrawList;
                        this.tbUserCashList = data.data.result.tbUserCashList;
                        // this.nociteM= data.data.result.records;
                    }
                })
            },
            //是否第一次进玩转
            firstCome() {
                this.$http.post(this.utils.config + "/netmall/app/person/api/getPersonCenterData?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    this.tbUserSqt = data.data.result.tbUserSqt.balance;
                    this.isRewardSqt = data.data.result.tbMnUser.isRewardSqt;
                    this.isFirstBuilding = data.data.result.tbMnUser.isFirstBuilding;
                    this.isGive100 = data.data.result.tbMnUser.isGive100;
                    this.integralAgent = data.data.result.tbMnUser.integralAgent;
                    // if (this.isRewardSqt == 0) {
                    //     this.personamomey = true;
                    // }
                })
            },
            //跳转到规则说明
            jumpRule() {
                this.$router.push('/luckruler');
            },
            //跳转到积分明细
            jumpInte() {
                if(this.isFirstBuilding == 1){
                    this.$router.push('/blockdetail');
                }else{
                    Toast('请先盖楼')
                }
            },
            //获取抽奖信息            
            raffle() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getLuckDrawList").then((data) => {
                    if (data.data.success) {
                        this.raffleList = data.data.result.list;
                    }
                })
            },
            //获取用户的所有任务             
            getLoginUserAllTasks() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getLoginUserAllTasks?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        this.taskList = data.data.result.taskList;
                        this.tb_user_contribution = data.data.result.tb_user_contribution.contributionValue;
                    }
                })
            },
            //获取盖楼首页数据
            getGameBuildingData() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getGameBuildingData?type=1&user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        if (data.data.result.state == 1) {
                            this.userType = data.data.result.tbUserGameBuiding.userType;
                            this.changdu = parseInt(data.data.result.tbUserGameBuiding.businessHours / 1440 * 100);
                            this.businessHours = data.data.result.tbUserGameBuiding.businessHours * 60000;
                            this.productCoinRate = data.data.result.tbUserUpgradeConfig.productCoinRate;
                            if (data.data.result.tbUserGameBuiding.businessHours > 0) {
                                this.proportion = data.data.result.tbUserUpgradeConfig.businessProportion;
                            } else {
                                this.proportion = data.data.result.tbUserUpgradeConfig.unbusinessProportion;
                            }
                            this.grade = data.data.result.tbUserUpgradeConfig.grade;
                            this.sqt_totalNumber = data.data.result.sqt_totalNumber;
                        }
                        this.gameBankState = data.data.result.state;
                    }
                })
            },
            //盖楼升级
            upgradeCli() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/upgradeGameBuilding?type=1&user_id=" + this.userId).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.getGameBuildingData();
                        this.show = false;
                    }
                })
            },
            //升级合伙人提示
            partnerCli() {
                // Toast('用户等级升级为合伙人后自动解锁！');
                if(this.tbUserSqt >= this.profitNumber){                    
                    this.$http.post(this.utils.config + "/netmall/app/person/api/integralUpgradeAgent?user_id=" + this.userId).then((data) => {
                        if (data.data.success) {
                            this.firstCome();
                            Toast(data.data.result.message);
                        }
                    })
                }else{
                    this.$router.push('/integralTopUp');
                }
            },
            luckdraw(val) {
                this.$router.push({
                    path: `/luckdraw/${val}`
                })
            },
            luckuser(val) {
                this.$router.push({
                    path: `/luckuser/${val}`
                })
            },
            showDeleteButton: function (e) {
                // clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function () {
                    if (this.changdu < 100) {
                        this.changdu++;
                        // if (this.changdu === 99) {
                        //     this.businessHours = this.businessHours + 60 * 60 * 1000;
                        // }
                        this.showDeleteButton();
                    } else {
                        this.changdu = 0;
                    }

                }.bind(this), 100);

            },
            //升级盖楼
            showPopup() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getNextUpgradeGameBuilding?type=1&sort=0").then((data) => {
                    if (data.data.success) {
                        this.profitNumber = data.data.result.profitNumber;
                    }
                })
            },
            //取消升级
            gradeclose() {
                this.show = false;
            },
            // 盖楼
            blockPopup() {
                this.isblock = true;
            },
            blockPopupToast() {
                Toast('SQT不足');
            },
            //创建盖楼
            stackopolisCli() {
                this.disShow = true;
                var userType;
                if(this.isFirstBuilding == 0){
                    userType = 1;
                }else{
                    userType = 2;
                }
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/createGameBuilding?type=1&user_type="+userType+"&user_id=" + this.userId).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.getGameBuildingData();
                        this.firstCome();
                        this.isblock = false;
                        this.disShow = false;
                    }
                })
            },
            gradecloseblock() {
                this.isblock = false
            },
            sightTask(val) {
                // if (val.taskName == "签到") {
                //     this.$http.get(this.utils.config + "/netmall/app/person/api/integralTask?user_id=" + this.userId + "&taskName=" + val.taskName).then((data) => {
                //         if (data.data.result) {
                //             this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/showSignInDatabyWeek?user_id=" + this.userId).then((data) => {
                //                 if (data.data.success) {
                //                     this.issigth = true;
                //                     this.integralconfig = data.data.result.integralconfig;
                //                     this.tbUserIntegralConfigDetailArr = data.data.result.tbUserIntegralConfigDetailList[data.data.result.tbUserIntegralConfigDetailList.length - 1];
                //                     this.getLoginUserAllTasks();
                //                     this.tbUserIntegralConfigDetailList = "";
                //                     var list = data.data.result.tbUserIntegralConfigDetailList || [];
                //                     let tempObj = list[0] || {};
                //                     this.taskList[tempObj.sort - 1].completeState = 1;
                //                     for (let i = 0; i < list.length; i++) {
                //                         this.tbUserIntegralConfigDetailList += list[i].whichDayWeek + ',';
                //                     }
                //                 }
                //             })
                //         } else {
                //             Toast(data.data.message);
                //         }
                //     })
                // }
                if (val.taskName == "邀请好友") {
                    this.$router.push('/invitation');
                }
                // if (val.taskName == "搜索商品") {
                //     this.$router.push('/searchPage');
                // }
                if (val.taskName == "分享商品") {
                    this.$router.push('/');
                }
                if (val.taskName == "分享应用") {
                    this.$router.push('/invitation?type=share');
                    return;
                }
                if (val.taskName == "玩游戏") {
                    this.$router.push('/gamePage');
                }
                if (val.taskName == "看资讯") {
                    this.$router.push('/informationPage');
                }
                // if (val.taskName == "自购商品") {
                //     this.$router.push('/');
                // }
                // if (val.taskName == "推荐他人购买") {
                //     this.$router.push('/');
                // }
            },
            issigthclose() {
                this.issigth = false
            },
            newpersonal() {
                //  禁用连续点击
                if (this.disableCilck) {
                    return;
                }
                this.disableCilck = true;
                setTimeout(() => {
                    this.disableCilck = false;
                }, 3000)
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/giveFirstSQT?user_id=" + this.userId).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.personamomey = false;
                        this.isblock = true;
                    }
                })
            },
            newpersonaltask() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/give100Hours?user_id=" + this.userId).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.getGameBuildingData();
                    }
                })
            },
            newpersonalsure() {
                this.personbranch = false
            },
            newpersonalTips() {
                this.Tips = false
            }

        },
    }
</script>

<style scoped>
    @import url("../assets/font/iconfont.css");

    .disGai{
        width: 160px;
        position: absolute;
        top: 302px;
        left: calc(50% - 80px);
    }

    #overCl /deep/ .van-overlay {
        z-index: 10000 !important;
    }

    .topRule {
        color: #fff;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    /*兑换银行*/
    .persobranch {
        width: 285px;
        height: 304px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        text-align: center;

    }

    .persobranch p {
        margin-top: 25px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: rgba(51, 51, 51, 1);
    }

    .new-block-left {
        width: 40px;
        height: 40px;
        background: url("../assets/img/yinhang.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: 12px auto auto 10px;
        float: left;
    }

    .new-block-leftt {
        width: 40px;
        height: 40px;
        background: url("../assets/img/superyinhang.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: 12px auto auto 10px;
        float: left;
    }

    .new-block-lefttt {
        width: 40px;
        height: 40px;
        background: url("../assets/img/glyinghang.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: 12px auto auto 10px;
        float: left;
    }

    .new-block-right {
        width: 170px;
        float: left;
        text-align: left;
        padding-left: 12px;
        position: relative;
    }

    .new-block-right p {
        position: absolute;
        top: -10px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 12px;
        color: rgba(103, 131, 215, 1);
    }

    .new-block-right p span {
        font-size: 10px;
        text-decoration: line-through;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 12px;
        color: rgba(103, 131, 215, 1);
    }

    .new-block-right-p {
        margin-top: 34px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(255, 78, 78, 1);
    }

    .Tips-contentth {
        height: 80px;
        width: 80px;
        background: url("../assets/img/stop@2x.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        margin: 23px auto 0 auto;

    }

    .personalpp {
        margin-top: 8px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(242, 61, 61, 1);
    }



    /**/
    .new-person {
        width: 285px;
        height: 244px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        border-radius: 10px;
        text-align: center;
    }

    .new-person p {
        margin: 26px auto 0 auto;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(51, 51, 51, 1);
    }

    .new-personth {
        width: 285px;
        height: 256px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 10px;
        text-align: center;
    }

    .new-personth p {
        margin: 26px auto 0 auto;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(51, 51, 51, 1);
    }

    .personalp {
        /*position: relative;*/
        /*top: -20px;*/
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 20px;
        color: rgba(254, 165, 110, 1);
        margin-bottom: 21px;
    }

    .new-content {
        margin: 10px auto 0 auto;
        padding: 0 37px;
        height: 125px;
        width: 100%;
    }

    .new-content-left {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 125px;
        color: rgba(223, 133, 98, 1);
        width: 50%;
        float: left;
        text-align: right;
    }

    .new-content-right {
        margin-top: 14px;
        float: left;
        width: 90px;
        height: 90px;
        background: url("../assets/img/sqting.png");
        background-size: 100% 100%;
    }

    .new-contentth {
        margin: 10px auto 0 auto;
        padding: 0 37px;
        height: 100px;
        width: 100%;
    }

    .new-content-leftth {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 100px;
        color: rgba(223, 133, 98, 1);
        float: left;
        text-align: right;
    }

    .new-content-rightth {
        margin-top: 20px;
        margin-left: 20px;
        float: left;
        width: 60px;
        height: 60px;
        background: url("../assets/img/open@2x.png");
        background-size: 100% 100%;
    }

    .new-content:before {
        content: '';
        clear: both;
    }

    .newpers-btn {
        width: 171px;
        height: 38px;
        margin: auto;
        background: linear-gradient(90deg, rgba(255, 90, 160, 1) 0%, rgba(255, 46, 103, 1) 100%);
        opacity: 1;
        border-radius: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 38px;
        color: rgba(255, 255, 255, 1);

    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block-block-sight {
        width: 285px;
        height: 372px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 10px;
        text-align: center;
    }

    .block-block-sight p {
        margin-top: 25px;
        height: 25px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: rgba(51, 51, 51, 1);

    }

    .block-block-sight b {
        display: inline-block;
        margin-top: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(223, 133, 98, 1);
    }

    .block {
        width: 285px;
        height: 340px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 10px;
        text-align: center;
    }

    .block p {
        width: 100%;
        height: 25px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: rgba(51, 51, 51, 1);
        margin: 25px auto 0 auto;
    }

    .block-block {
        width: 285px;
        height: 230px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 10px;
        text-align: center;
    }

    .block-block p {
        width: 100%;
        height: 25px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: rgba(51, 51, 51, 1);
        margin: 25px auto 0 auto;
    }

    .block-grade {
        margin: 16px 31px auto 31px;
        height: 67px;
        border: 1px solid rgba(249, 222, 113, 1);
        box-shadow: 0px 0px 0px rgba(255, 198, 0, 1);
        opacity: 1;
        border-radius: 10px;
        position: relative;
    }


    .sight-top {
        background: url("../assets/img/sightop.png");
        background-size: 100% 100%;
        margin: 0 37px;
        height: 39px;
        border-radius: 10px 10px 0px 0px;
    }

    .box-bottom {
        margin: 0 37px;
        height: 158px;
        background: rgba(255, 248, 217, 1);
        border: 1px solid rgba(249, 222, 113, 1);
        box-shadow: 0px 0px 0px rgba(255, 198, 0, 1);
        border-radius: 0px 0px 10px 10px;
    }

    .box-list {
        padding: 8px 9px 0 9px;
        overflow: hidden;
    }

    .box-list li {
        position: relative;
        width: 44px;
        height: 59px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(255, 215, 135, 1);
        opacity: 1;
        border-radius: 4px;
        margin: 7px 5px 0 0;
        float: left;
    }

    .box-list li p {
        position: absolute;
        top: -20px;
        right: 0;
        left: 0;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(236, 200, 129, 1);
    }

    .box-list li img {
        width: 30px;
        height: 25px;
        display: inline-block;
        position: absolute;
        top: 18px;
        left: 0;
        right: 0;
        margin: auto;

    }

    h5 {
        position: absolute;
        bottom: 4px;
        left: 0;
        right: 0;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(223, 133, 98, 1);

    }

    .sight-content {
        position: absolute;
        top: 17px;
        right: 0;
        left: 0;
        margin: auto;
        width: 36px;
        height: 36px;
        background: rgba(251, 220, 100, 1);
        border-radius: 50%;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36px;
        color: rgba(255, 255, 255, 1);
    }

    .box-list li:nth-child(4) {
        margin-right: 0;
    }

    .box-list li:last-child {
        width: 92px;
        height: 59px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(255, 215, 135, 1);
        border-radius: 4px;
        margin-right: 0;
    }

    .sight-btn {
        margin: 19px auto 0 auto;
        width: 171px;
        height: 38px;
        background: rgba(237, 237, 237, 1);
        opacity: 1;
        border-radius: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 38px;
        color: rgba(102, 102, 102, 1);
    }

    .block-gradee {
        margin: 0 31px auto 31px;
        height: 67px;
        border: 1px solid rgba(249, 222, 113, 1);
        box-shadow: 0px 0px 0px rgba(255, 198, 0, 1);
        opacity: 1;
        border-radius: 10px;
        position: relative;
    }

    .block-grade-img {
        width: 79px;
        height: 67px;
        position: relative;
    }

    block-block-grade-img {
        width: 70px;
        height: 67px;
        position: relative;
    }

    .block-grade-right {
        height: 67px;
        width: 150px;
        position: absolute;
        top: 0;
        left: 69px;
        text-align: left;
        overflow: hidden;

    }

    .block-block-grade-right {
        height: 67px;
        width: 150px;
        position: absolute;
        top: 0;
        left: 69px;
        text-align: left;
        overflow: hidden;

    }

    .block-grade-right p {
        margin: 8px auto auto 25px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;

        color: rgba(103, 131, 215, 1);
    }

    .block-block-grade-right p {
        margin: 19px auto auto 2px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;

        color: rgba(103, 131, 215, 1);
    }

    h2 {
        top: -10px;
        margin-left: 25px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(254, 165, 110, 1);
    }

    h3 {
        top: -10px;
        margin-left: 2px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(254, 165, 110, 1);
    }

    .fugl {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 19px;
        color: rgba(172, 172, 172, 1);
    }

    .bufh {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 19px;
        color: rgba(242, 61, 61, 1);
    }

    .block-grade-img img:nth-child(1) {
        position: absolute;
        bottom: 8px;
        width: 44px;
        height: 31px;
        left: 10px;

    }

    .block-grade-img img:nth-child(2) {
        position: absolute;
        bottom: 18px;
        display: inline-block;
        width: 25px;
        height: 27px;
        left: 20px;

    }

    .block-block-grade-img img:nth-child(1) {
        position: absolute;
        bottom: 8px;
        width: 44px;
        height: 31px;
        left: 10px;

    }

    .block-block-grade-img img:nth-child(2) {
        position: absolute;
        bottom: 18px;
        display: inline-block;
        width: 39px;
        height: 33px;
        left: 12px;

    }

    .img-jintou {
        padding-top: 7px;
        height: 42px;
        width: 100%;
        margin: auto;
    }

    .img-jintou img {
        width: 20px;
        height: 22px;
    }

    .grade-btn-box {
        padding: 30px 31px auto 31px;
    }

    .grade-btn-left {
        margin: 14px 19px auto 50px;
        width: 32px;
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 12px;
        color: rgba(102, 102, 102, 1);
        float: left;
    }

    .grade-btn-right {
        float: left;
        width: 136px;
        height: 40px;
        background: url("../assets/img/button_500@2x.png");
        background-size: 100% 100%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36px;
        color: rgba(217, 0, 0, 1);
    }

    .block-grade-btn-right {
        margin-left: 20px;
        float: left;
        width: 100px;
        height: 45px;
        background: url("../assets/img/button_gl1@2x.png");
        background-size: 100% 100%;

        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36px;
        color: rgba(217, 0, 0, 1);
    }


    .home-change-grade {
        position: absolute;
        top: 10px;
        left: 36px;
        width: 34px;
        height: 20px;
        border: 1px solid rgba(255, 251, 133, 1);
        background: linear-gradient(50deg, rgba(255, 228, 67, 1) 0%, rgba(255, 253, 222, 1) 100%);
        box-shadow: 0px 3px 6px rgba(255, 247, 0, 0.38);
        opacity: 1;
        border-radius: 10px 10px 10px 0px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 20px;
        color: rgba(185, 0, 0, 1);
    }


    .play-top {
        margin-bottom: 50px;
    }

    .play-page {
        min-height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 1);
        position: relative;
        overflow-x: hidden;
    }

    .play-box {
        width: 100%;
        /* height: 437px;
        background-image: url('../assets/img/game-bg-normal.svg'); */
        background-position:bottom;
        text-align: center;
        overflow: hidden;
        overflow-x: hidden;
        border: none;
    }

    .play-box p {
        margin-top: 18px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: rgba(255, 255, 255, 1);
    }

    .overhidren {
        position: absolute;
        left: 24px;
        bottom: -15px;
        width: 92%;
        height: 100px;
        background: url("../assets/img/shade3@2x.png");
        background-size: 100% 100%;

    }

    .grade-togeter {
        position: absolute;
        bottom: 20px;
        left: 10px;
        right: 0;
        z-index: 999;
        width: 127px;
        height: 30px;
        background: url("../assets/img/button_sjhhrjs@2x.png");
        margin: 34px auto auto auto;
        background-size: 100% 100%;
        text-align: center;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 25px;
        color: rgba(217, 0, 0, 1);
    }

    .play-box-tittle {
        margin-top: 5px;
        height: 74px;
        width: 100%;
        padding: 0 21px;
        position: relative;
    }

    .play-box-white {
        position: absolute;
        z-index: 2;
        left: 27px;
        top: 0;
        width: 128px;
        height: 65px;
        background: linear-gradient(180deg, rgba(255, 245, 244, 1) 0%, rgba(255, 255, 255, 0) 100%);
        opacity: 1;
        border-radius: 10px 10px 0px 0px;
    }

    .play-box-top {
        position: absolute;
        top: 6px;
        right: 21px;
        left: 21px;
        z-index: 10;
        height: 63px;
        background: linear-gradient(180deg, rgba(205, 241, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 10px 10px 0px 0px;
        margin: auto;
    }

    .play-box-top p {
        position: relative;
        top: -10px;
        margin-left: 14px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 12px;
        color: rgba(103, 131, 215, 1);
        text-align: left;

    }

    .play-box-top p span {
        display: inline-block;
        float: right;
        margin-right: 14px;
        margin-left: 14px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 12px;
        color: rgba(103, 131, 215, 1);
        text-align: right;
    }

    .play-box-conten {
        position: relative;
        z-index: 100;
        padding: 0 14px;
        height: 40px;
        font-size: 28px;
        font-family: PingFang SC;
        color: #FDFEFD;
        /*background-image: -webkit-linear-gradient(bottom, #FEA56E, #FDFEFD);*/
        /*-webkit-background-clip: text;*/
        /*-webkit-text-fill-color: transparent;*/
        font-weight: 600;
        line-height: 20px;
        text-align: left;
    }

    .play-box-conten span {
        display: inline-block;
        float: right;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 12px;
        color: #FDFEFD;
        /*background-image: -webkit-linear-gradient(bottom, #FEA56E, #FDFEFD);*/
        /*-webkit-background-clip: text;*/
        /*-webkit-text-fill-color: transparent;*/
        text-align: right;
    }

    .play-box-contenn {
        position: relative;
        z-index: 99;
        padding: 0 14px;
        top: -38px;
        left: 2px;
        height: 40px;
        font-size: 28px;
        font-family: PingFang SC;
        color: #FEA56E;
        font-weight: 600;
        line-height: 20px;
        text-align: left;
    }

    .play-box-contenn span {
        display: inline-block;
        float: right;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 12px;
        color: #FEA56E;
        text-align: right;
    }

    .play-block {
        height: 208px;
        width: 100%;
        position: relative;
        display: flex;
        white-space: nowrap;
        flex-wrap: wrap;
    }

    .play-block li {
        height: 103px;
        width: 26%;
        /*background: #39a9ed;*/
        position: relative;
        /*z-index: 5;*/
        /*width: 30%;*/
        display: flex;
        justify-content: space-around;
        margin-left: 13px;
    }

    .play-block li:nth-child(1) {
        margin-left: 36px;
    }

    .play-block li:nth-child(4) {
        margin-left: 0;
    }

    .play-block li:nth-child(4),
    .play-block li:nth-child(5),
    .play-block li:nth-child(6) {}

    .play-block li img {
        width: 108px;
        height: 74px;
        position: absolute;
        bottom: 0;
    }

    .new-grade {
        width: 287px;
        height: 21px;
        background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(131, 160, 242, 1) 100%);
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        margin: auto;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 21px;
        color: #ffffff;
    }

    .new-grade span {
        font-weight: 400;
        color: rgba(247, 255, 0, 1);
    }

    .new-box {

        height: 81px;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
        border-radius: 5px;
        margin: 0 14px;
    }

    .block-home {
        position: absolute;
        z-index: 10;
        bottom: 20px;
        background: url("../assets/img/bank1.png");
        width: 96px;
        height: 81px;
        background-size: 100% 100%;
    }

    .block-homee {
        position: absolute;
        z-index: 10;
        bottom: 20px;
        background: url("../assets/img/supermarket1.png");
        width: 68px;
        height: 84px;
        background-size: 100% 100%;
    }

    .block-homee-grage {
        position: absolute;
        z-index: 88;
        top: 48px;
        left: 35px;
        width: 59px;
        height: 40px;
        background: url("../assets/img/button_sj@2x.png");
        background-size: 100% 100%;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36px;
        color: rgba(217, 0, 0, 1);

    }

    .block-cover {
        position: absolute;
        z-index: 20;
        bottom: -15px;
        width: 130px;
        height: 124px;
        background: url("../assets/img/shade1@2x.png");
        background-size: 100% 100%;

    }

    .block-homeee {
        position: absolute;
        z-index: 10;
        bottom: 20px;
        background: url("../assets/img/store2.png");
        width: 96px;
        height: 81px;
        background-size: 100% 100%;
    }

    .block-homeee-btn {
        position: absolute;
        z-index: 80;
        bottom: 26px;
        width: 49px;
        height: 30px;
        background: url("../assets/img/button_gl1@2x.png");
        background-size: 100% 100%;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 26px;
        color: rgba(217, 0, 0, 1);
        text-align: center;
    }

    .block-home-grage {
        position: absolute;
        z-index: 80;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 20px;
        border: 1px solid rgba(255, 251, 133, 1);
        background: linear-gradient(50deg, rgba(255, 228, 67, 1) 0%, rgba(255, 253, 222, 1) 100%);
        box-shadow: 0px 3px 6px rgba(255, 247, 0, 0.38);
        opacity: 1;
        border-radius: 10px 10px 10px 0px;
        text-align: center;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 20px;
        color: rgba(185, 0, 0, 1);
    }

    .myTask {
        display: flex;
        height: 42px;
        justify-content: space-between;
        padding: 0 14px;
        font-size: 14px;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 60px;
    }

    .myTask p {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: rgba(223, 133, 98, 1);
    }

    .icc {
        font-size: 12px;
        color: #cccccc;
    }

    .Task-list {
        height: 72px;
        margin: 0 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .Task-list img {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-top: 21px;
        float: left;
    }

    .Tasl-list-content {
        padding-top: 20px;
        width: 55%;
        margin-left: 12px;
        height: 100%;
        float: left;
    }

    .Tasl-list-content p {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .Tasl-list-content p span {
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(223, 133, 98, 1);
        line-height: 20px;
    }

    h6 {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        width: 100%;
        line-height: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    }

    .tasl-list-right {
        margin-top: 22px;
        float: right;
        width: 83px;
        height: 28px;
        background: linear-gradient(90deg, rgba(255, 90, 160, 1) 0%, rgba(255, 46, 103, 1) 100%);
        border-radius: 14px;
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 28px;
        text-align: center;
    }

    .new-box-left {
        float: left;
        width: 52%;
    }

    .new-box-right {
        float: right;
        width: 48%;
    }

    .new-box-left-test {
        font-size: 12px;
        line-height: 40px;
        float: left;
        margin-left: 8px;
    }

    .new-box-right-img {
        height: 40px;
        width: 90%;
        margin: auto;
        margin-top: 22px;
        background: url("../assets/img/button_gl2@2x.png");
        background-size: 100% 100%;
        line-height: 34px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(217, 2, 4, 1);
    }
</style>